<template>
	<div class="tuijian">
	<header class="header">
	<ul>

		<li v-for="(head,index) in heads" @click="headIndex = index"
		:class="{active:headIndex == index}">
		<router-link :to="head.path">
			{{head.text}}
		</router-link>
		</li>
	</ul>
	</header>
	<section>
			
			<div class="swiper-container banners">
		      <div class="swiper-wrapper">
				
		        <div class="swiper-slide" v-for="m in bans">
		        <router-link :to="m.path">
		          <img :src="m.ban">
		           </router-link>
		        </div>
		  
		        
		      </div>
		      <!-- 如果需要分页器 -->
		      <div class="swiper-pagination"></div>
		      <!-- 如果需要滚动条 -->
		      <!-- <div class="swiper-scrollbar"></div> -->
    </div>

		<ul class="list">
		
			<li v-for="list in lists">
			<router-link :to="list.path">
				<div class="li"><img :src="list.urls" alt="">
				<p>{{list.font}}</p></div>
			</router-link>
			</li>
		
		</ul>
		<h3>{{gx}}</h3>
		<div class="ban" v-for="img in imge">
			<img :src="img.srcs" alt="">
		</div>
	</section>
	<div class="footer">
		<ul class="foot">
			<li v-for="foo in foos">
				<img :src="foo.imgss" alt="">
				<p>{{foo.test}}</p>
			</li>
		</ul>
	</div>
	</div>
</template>
<script>
import '../../../static/js/swiper.jquery.min.js';

	export default{
		name:'tuijian',
		data(){
			return{
				headIndex:0,
				heads:[
					{text:'推荐',path:'tandian'},
					{text:'探店',path:'tandian'},
					{text:'测评',path:'tandian'},
					{text:'菜谱',path:'tandian'},
					{text:'专题',path:'tandian'},
					{text:'推荐',path:'tandian'},
				],
				bans:[
					{ban:"../../../static/img/c-banner.png",path:'indeOut'},
					{ban:"../../../static/img/c-banner.png",path:'indeOut'},
					{ban:"../../../static/img/c-banner.png",path:'indeOut'},
				],
				lists:[
					{urls:"../../../static/img/tuijian_03.png",font:"银河系吃货",path:'chihuo'},
					{urls:"../../../static/img/tuijian_05.png",font:"无人岛先生",path:'chihuo'},
					{urls:"../../../static/img/tuijian_07.png",font:"一名",path:'chihuo'},
					{urls:"../../../static/img/tuijian_03.png",font:"银河系吃货",path:'chihuo'}
					
				],
				gx:'最近更新',
				imge:[
					{srcs:"../../../static/img/tuijian_16.png"},
					{srcs:"../../../static/img/tuijian_19.png"},
					{srcs:"../../../static/img/tuijian_21.png"},
					{srcs:"../../../static/img/tuijian_23.png"},
					{srcs:"../../../static/img/tuijian_16.png"},
					{srcs:"../../../static/img/tuijian_19.png"},
					{srcs:"../../../static/img/tuijian_21.png"},
					{srcs:"../../../static/img/tuijian_23.png"},
					
				],
				foos:[
					{imgss:"../../../static/img/footers_26.png",test:"首页"},
					{imgss:"../../../static/img/footers_28.png",test:"视频"},
					{imgss:"../../../static/img/footers_30.png",test:"个人中心"}
				],
			}
		},
		 mounted () {
		     console.log('挂载好了')
		      var swiper = new Swiper('.swiper-container',{
			      autoplay:2000,
			      scrollbarHide:false,
			      autoplayDisableOnInteraction:false,
			      loop:true,
			      pagination:".swiper-pagination",
			      //滚动条
			       // scrollbar: '.swiper-scrollbar',
			    })
		     console.log(swiper)
		   }
	}
</script>
<style scoped lang="less">
@import "../../assets/css/reset.css";
@import '../../assets/css/swiper.css';

.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.flexbox{
	display: flex;
}
.height(@ht){.px2rem(height,@ht)}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}

.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-radius(@arg){.px2rem(border-radius, @arg);}

.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}

.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}
	


.header{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	.height(75);
	background: #fff;
	ul{

		.flexbox;
		width:100%;
		li{
			width:18%;
			.height(70);
			text-align: center;
			.line-height(75);
			.font(30,#000);
			
		}
		.active{
				border-bottom: 5px solid #000;
			}
	}
}
section{
	.margin-top(75);

		.banners{
			width:100%;
			.swiper-wrapper{
				img{
					width:100%;
					.height(460);
				}
			}

		}

		.swiper-pagination{
			position: absolute;
			top:5%;
			left:42%;
		}

		
	.list{
		.flexbox;
		width:100%;
		.margin-top(21);
		.margin-bottom(21);
		text-align: center;
		align-items: center;
		justify-content: space-around;
		overflow-x:auto; 
		li{
			width:15%;
			.margin-left(20)
			img{
				.px2rem(width, 112); 
	   .height(108);
			}
		}
	}
	h3{
		border-left:10px solid #000;
		.height(43);
		.line-height(43);
		.px2rem(padding-left,30);
	}
	.ban{
	text-align: center;
	img{
	width:90%;
	   .height(450);
	}
}
}
.foot{
	position: fixed;
	width:100%;
	bottom:0;
	background: #fff;
	border: 1px solid #ccc;
		.flexbox;
		.height(93);
		text-align: center;
		align-items: center;
		li{
			width:33%;
			.height(83);
			text-align: center;
			img{
				.px2rem(width,70);
				.height(55);
			}
		}
	}


</style>